<template>
	<div class="flex" style="border-left: 1px #eaeaea solid; border-bottom: 1px #eaeaea solid; border-right: 1px #eaeaea solid;">

    <div class="zuobian" style="width: 380px; height: calc(100vh - 105px); border-right:1px #eaeaea solid; overflow: auto; position: relative;">
     <div style="height: 50%; overflow: auto; border-bottom: 5px rgb(234, 234, 234) solid; padding: 20px;">

        <el-tree  class="filter-tree" @node-click="handleNodeClick" :data="data" :props="defaultProps" node-key="treeId"
                  :default-expanded-keys="zhankaiarray" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :filter-node-method="filterNode" ref="tree">
        </el-tree>
      </div>
      <div style="position: absolute; left: 0; bottom: 0; background: #fff; width: 100%; height: calc(50% - 10px); overflow: auto;">
        <div>
          <el-table  ref="multipleTable"  :data="tableData"  tooltip-effect="dark"  style="width: 100%"  @selection-change="handleSelectionChange">
              <el-table-column type="selection"></el-table-column>
              <el-table-column prop="time" label="采样时间"></el-table-column>
              <el-table-column prop="cyl" label="采样值"></el-table-column>
              <el-table-column prop="stationsNo" label="仪器序列号"></el-table-column>
              <el-table-column prop="beizhu" label="备注"></el-table-column>
            </el-table>
        </div>
      </div>
    </div>

    <div class="youbian" style="padding: 20px; width: calc(100vw - 680px);">
      <el-button type="primary" @click='tianjia1'>采样值趋势数据</el-button>
      <el-button type="primary" @click='tianjia2'>阶次分析</el-button>
      <el-button type="primary" @click='tianjia3'>倒谱分析</el-button>
      <el-button type="primary" @click='tianjia4'>包络联调</el-button>
      <el-button type="primary" @click='tianjia5'>瀑布图</el-button>
      <el-button type="primary" @click='tianjia6'>波形再处理</el-button>

      <div id="mainh" style="width: 1000px; height: 500px;"></div>
    </div>



    <div v-show="menuVisible" class="custom-menu" :style="{left: menuPosition.x + 'px', top: menuPosition.y + 'px'}" >
      <div class="li" @click="shiyuzhibiaolog = true" >时域指标信息</div>
      <div class="li" @click="shiyuzhibiaolog2 = true" >工艺量均值</div>
    </div>

    <el-dialog title="时域指标信息" center :visible.sync="shiyuzhibiaolog" width="900px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">
      <el-table :data="data"  style="width: 100%" >
        <el-table-column align="center" prop="index" label="序号"></el-table-column>
        <el-table-column align="center" prop="index" label="指标名称"></el-table-column>
        <el-table-column align="center" prop="index" label="指标值"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="工艺量均值" center :visible.sync="shiyuzhibiaolog2" width="900px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">
      <el-table :data="data"  style="width: 100%" >
        <el-table-column align="center" prop="index" label="工艺量名称"></el-table-column>
        <el-table-column align="center" prop="index" label="值"></el-table-column>
        <el-table-column align="center" prop="index" label="采集时间"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>



  import * as echarts from 'echarts';
  import { gettree,gettreecedian,gettreeshebei } from '@/api/xitong'
  import { getanalysis,postanalysis } from '@/api/shujuchakan'
	export default {
		name: 'left',
		data() {
			return {
        filterText:"",
        data:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        menuVisible: false,
        shiyuzhibiaolog:false,
        shiyuzhibiaolog2:false,
        menuPosition: { x: 0, y: 0 },

        youjiandangqian:"",
        zhankaiarray:[],

        tableData:[],

        myChart:"",
        youjiandangqian:"",

        zhexiantushuju:[],
        testarr2:[]

			}
		},
		created() {
      this.getlist()


		},
		mounted() {

		},
		methods: {
      tianjia1:function(){

      },
      tianjia2:function(){



      },
      tianjia3:function(){
        // 示例信号
                const signal = this.zhexiantushuju;
                console.log(signal)
                // 窗函数
                const windowedSignal = applyWindowFunction(signal, 'hamming');

                // 执行傅里叶变换
                const spectrum = math.fft(windowedSignal);

                // 计算对数幅度谱
                const logSpectrum = spectrum.map(value => math.log10(math.abs(value) + 1)); // 加1是为了防止log(0)


                // 计算离散余弦变换（DCT）
                const dctCoefficients = dct(logSpectrum);

                this.testarr2 = dctCoefficients
                this.myChart.clear()
                this.shengchengtu()
                // 输出倒谱系数
                // console.log('倒谱系数:', dctCoefficients);

                // 窗函数应用函数
                function applyWindowFunction(signal, windowType) {
                    // 此处为示例，你可能需要实现不同类型的窗函数
                    if (windowType === 'hamming') {
                        return signal.map((value, index) => value * (0.54 - 0.46 * Math.cos(2 * Math.PI * index / (signal.length - 1))));
                    } else {
                        // 默认使用汉明窗
                        return signal.map((value, index) => value * (0.54 - 0.46 * Math.cos(2 * Math.PI * index / (signal.length - 1))));
                    }
                }
                function dct(signal) {
                    const N = signal.length;
                    const dctCoefficients = [];

                    for (let k = 0; k < N; k++) {
                        let sum = 0;
                        for (let n = 0; n < N; n++) {
                            sum += signal[n] * Math.cos((Math.PI / N) * (n + 0.5) * k);
                        }
                        dctCoefficients.push(sum);
                    }

                    return dctCoefficients;
                }
      },
      tianjia4:function(){

      },
      tianjia5:function(){

      },
      tianjia6:function(){

      },

      shengchengtu:function(){
        this.option = {
          toolbox: {
                  feature: {
                      contextMenu: {
                          // 自定义右键菜单项
                          itemList: ['saveAsImage', 'dataView', 'restore', 'dataZoom', 'magicType']
                      }
                  }
              },
          title: {
            text: '测点图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['测点1', '测点2', '测点3', '测点4', '测点5']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: 'Email',
              type: 'line',
              stack: 'Total',
              data: this.testarr2
            }
          ]
        };

        if(this.myChart){
          this.myChart.setOption(this.option);
        }else{
          var chartDom = document.getElementById('mainh');
          this.myChart = echarts.init(chartDom);
          this.myChart.setOption(this.option);
        }
      },


      //选中测点 生成折线图
      handleSelectionChange:function(val){
        let data = []
        val.forEach((item)=>{
          let obj = {
            "ip": item.ip,
            "tongDao": item.tongDao,
            "time": item.time,
            "tdLx": item.tdLx,
            "treeName": item.treeName
          }
          data.push(obj)
        })
        let arr = []
        postanalysis(data).then(response => {
          response.data.forEach(item=>{
            console.log(item)
            arr = [...arr,...item.points]
          })
          this.zhexiantushuju = arr
          this.testarr2 = arr
          this.shengchengtu()
        })
      },
      // 当节点展开
      handleNodeExpand(data, node, instance) {
        this.zhankaiarray.push(data.treeId);
      },
      // 当节点折叠
      handleNodeCollapse(data, node, instance) {
        const index = this.zhankaiarray.indexOf(data.treeId);
        if (index > -1) {
          this.zhankaiarray.splice(index, 1);
        }
      },

      //点击测点获取日志
      handleNodeClick(data) {
        if(data.type == 21 || data.type == 22 || data.type == 23){
          getanalysis(data.value).then(response => {
            this.tableData = response.data
          })
        }
      },

      filterNode(value, data) {
        // if (!value) return true;
        // return data.label.indexOf(value) !== -1;
      },
      getlist:function(){
        gettreecedian().then(response => {
          this.data = response.data
        })
      }
		}
	}
</script>


<style scoped lang="less">

  .custom-menu {
    position: fixed;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    overflow: hidden;
    z-index: 3000;

  }
  .li{
    cursor: pointer; color: #005AFF; padding:10px 20px; font-size: 12px;
    &:hover{ background: #005AFF !important; color:#fff !important;}
  }

</style>
